import React, { Component } from 'react';
import menuRoute from "routes/menuRoute";
import { messages } from "share/common";
import { Badge, Button, message, Popconfirm, Popover } from "antd";
import Info from "components/info";
import SlideFrame from "components/slide-frame";
import AdvancedTable from "components/advanced-table";
import AutoCheckDetail from "./detail"
import autoCheckService from "./auto-check-receipt.service"

const SimpleTable = AdvancedTable.SimpleTable;

class AutoCheckReceipt extends Component {

  state = {
    loading: false,
  };

  columns = [{
    title: messages('expense-14.key312')/*层级*/,
    dataIndex: 'levelCode',
    render: value => value === 'COMPANY' ?
      messages('expense-14.key320')/*公司*/ :
      messages('expense-14.key321')/*租户*/
  }, {
    title: messages('expense-14.key307')/*所属组织*/,
    dataIndex: 'levelOrgName'
  }, {
    title: messages('expense-14.key310')/*启用公司*/,
    dataIndex: 'distLevelOrgName',
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('expense-14.key496')/*核票方式*/,
    dataIndex: 'receiptCheckType',
    width: '25%'
  }, {
    title: messages('common.column.status')/*状态*/,
    dataIndex: 'enabled',
    render: value => (
      <Badge
        status={value ? 'success' : 'error'}
        text={value ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}
      />
    )
  }, {
    title: messages('common.operation')/*操作*/,
    dataIndex: 'receiptCheckConfigId',
    render: (value, record) => (
      record.readOnly ? (
        <span onClick={e => e.stopPropagation()} className="font-disabled">{messages('common.delete')/*删除*/}</span>
      ) : (
        <Popconfirm
          title={messages('common.confirm.delete')/*确定要删除吗？*/}
          onConfirm={() => this.handleDelete(value)}
        >
          <a onClick={e => e.stopPropagation()}>{messages('common.delete')/*删除*/}</a>
        </Popconfirm>
      )
    )
  }];

  service = (page, size) => {
    return autoCheckService.getConfigList(page, size)
  };

  handleNew = () => {
    SlideFrame.open({
      title: messages('expense-14.key488')/*智能收票管理*/,
      content: AutoCheckDetail,
      afterClose: refresh => refresh && this.advancedTableRef.getList(),
      params: {
        record: {}
      }
    }, this)
  };

  handleDelete = id => {
    this.setState({ loading: true });
    autoCheckService.deleteConfig(id).then(() => {
      message.success(messages('common.delete.success',{arg1: ""})/*{arg1} 删除成功*/);
      this.advancedTableRef.getList();
    }).finally(() => {
      this.setState({ loading: false });
    })
  };

  handleRowClick = record => {
    let url = menuRoute.getRouteItem('auto-check-receipt-setting').url;
    this.context.router.push(url.replace(':configId', record.receiptCheckConfigId));
  };

  render() {
    const { loading } = this.state;
    return (
      <div className="auto-check-receipt full-height-page">
        <SimpleTable
          showUtils
          tableName='receipt-check-table'
          show={['tag-list', 'table-utils']}
          rowKey="receiptCheckConfigId"
          loading={loading}
          columns={this.columns}
          service={this.service}
          searchForm={[]}
          onRef={ref => this.advancedTableRef = ref}
          onRow={record => ({
            onClick: () => this.handleRowClick(record)
          })}
        >
          <Info
            paragraph
            attributes={[{title: messages('expense-14.key384')/*说明*/, dataIndex: 'explain', span: 24, widthFix: false}]}
            dataSource={{explain: messages('expense-14.key489')/*您可以在此页面设置智能收票规则。*/}}
          />
          <Button type="primary" style={{ marginTop: 12 }} onClick={this.handleNew}>
            {messages('expense-14.key487')/*新增规则*/}
          </Button>
        </SimpleTable>
      </div>
    )
  }
}

AutoCheckReceipt.contextTypes = {
  router: React.PropTypes.object
};

export default AutoCheckReceipt;
